1. Components are reusable piece of UI code.

2. Component Contains : State, Props, Styles, Event Handlers, Hooks and JSX (HTML)

There are two types of components: functional and class components

1. Create Functional Components

Update the file: src/App.tsx

                  function App() {
                    return <h1>Hello,Manoj </h1>;
                  }

                  export default App;

                  

Usage of a Component in another component

           
                import './App.css'

                function Header() {
                    return <h1>Welcome to My Site</h1>;
                }

                function Footer() {
                    return <p>© 2024 My Company</p>;
                }

                function App() {
                    return (
                        <div>
                            <Header />
                            <p>This is the main content.</p>
                            <Footer />
                        </div>
                    );
                }

                export default App;


                

Header & Footer are Functional Components

2. class component

simple class component

                import React from "react";

                class App extends React.Component {
                    render() {
                        return <h1>GeeksForGeeks</h1>;
                    }
                }

                export default App;

                

Usage of a Component in another component

                import React from "react";



                class Header extends React.Component {
                    render() {
                        return <h1>Header</h1>;
                    }
                }


                class Footer extends React.Component {
                    render() {
                        return <h1>Footer</h1>;
                    }
                }


                class App extends React.Component {
                    render() {
                        return (
                          <div>
                              <Header />
                              <p>This is the main content.</p>
                              <Footer />
                          </div>
                      );
                    }
                }

                export default App;